<template>
  <div class="blogArticle">
    <blog-article-list
      :model="model"
      :article-list-info="articleInfoList"
      @load-article-by-type="loadArticleByType"
      @delete-article="deleteArticle"
    ></blog-article-list>
    <el-pagination
      layout="prev, pager, next"
      background
      :total="articleInfoTotal"
      :page-size="10"
      @current-change="pageChange"
      :hide-on-single-page="singlePage"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import BlogArticleList from "@/components/BlogArticleList.vue";
export default {
  props: ["articleInfo", "model"],
  components: {
    BlogArticleList,
  },
  computed: {
    singlePage() {
      // eslint-disable-next-line prettier/prettier
      return this.articleInfoTotal > 10 ? false : true;
    },
    articleInfoList() {
      return this.articleInfo ? this.articleInfo.list : null;
    },
    articleInfoTotal() {
      return this.articleInfo ? this.articleInfo.total : 0;
    },
  },
  methods: {
    pageChange(page) {
      this.$emit("page-change", page);
    },
    loadArticleByType(type) {
      this.$emit("load-article-by-type", type);
    },
    deleteArticle(articleInfo) {
      this.$emit("delete-article", articleInfo);
    },
  },
};
</script>

<style lang="less" scoped>
.blogArticle {
  .pagination {
    text-align: center;
    padding: 10px 0;
  }
}
</style>
